<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>商品详情</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .product-image-main {
            height: 400px;
            object-fit: cover;
            border-radius: 8px;
        }
        .product-image-thumb {
            height: 80px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 4px;
        }
        .product-image-thumb.active {
            border-color: #007bff;
        }
        .quantity-input {
            width: 80px;
        }
        .farmer-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
        }
        .product-description {
            white-space: pre-line;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="row">
            <!-- 商品图片 -->
            <div class="col-md-6 mb-4">
                <img th:src="${product.mainImage ?: '/static/images/default-product.jpg'}"
                     class="img-fluid product-image-main mb-3" alt="商品主图">
                
                <div class="row g-2" th:if="${not #lists.isEmpty(product.images)}">
                    <div class="col-3" th:each="image : ${product.images}">
                        <img th:src="${image}" class="img-fluid product-image-thumb" 
                             onclick="switchMainImage(this.src)" alt="商品图片">
                    </div>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="col-md-6">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/products}">商品列表</a></li>
                        <li class="breadcrumb-item" th:text="${product.categoryName}">分类</li>
                        <li class="breadcrumb-item active" th:text="${product.name}">商品名称</li>
                    </ol>
                </nav>

                <h2 class="mb-3" th:text="${product.name}">商品名称</h2>
                
                <div class="mb-4">
                    <h3 class="text-danger mb-2">
                        ¥<span th:text="${#numbers.formatDecimal(product.price, 1, 2)}">0.00</span>
                    </h3>
                    <small class="text-muted">
                        库存: <span th:text="${product.stock}">0</span> | 
                        销量: <span th:text="${product.sales}">0</span>
                    </small>
                </div>

                <div class="farmer-card mb-4">
                    <div class="d-flex align-items-center mb-2">
                        <i class="fas fa-user-circle fa-2x me-2"></i>
                        <div>
                            <h5 class="mb-0" th:text="${product.farmerName}">农户名称</h5>
                            <small class="text-muted">信誉等级: 
                                <i class="fas fa-star text-warning" 
                                   th:each="i : ${#numbers.sequence(1, product.farmerRating)}"></i>
                            </small>
                        </div>
                    </div>
                    <p class="mb-0" th:text="${product.farmerDescription}">农户简介</p>
                </div>

                <form class="mb-4" th:action="@{/cart/add}" method="post">
                    <input type="hidden" name="productId" th:value="${product.id}">
                    <div class="row g-3 align-items-center">
                        <div class="col-auto">
                            <label for="quantity" class="col-form-label">数量:</label>
                        </div>
                        <div class="col-auto">
                            <div class="input-group quantity-input">
                                <button type="button" class="btn btn-outline-secondary" 
                                        onclick="updateQuantity(-1)">-</button>
                                <input type="number" class="form-control text-center" id="quantity" 
                                       name="quantity" value="1" min="1" th:max="${product.stock}">
                                <button type="button" class="btn btn-outline-secondary" 
                                        onclick="updateQuantity(1)">+</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-cart-plus me-2"></i>加入购物车
                        </button>
                        <button type="button" class="btn btn-danger" onclick="buyNow()">
                            <i class="fas fa-bolt me-2"></i>立即购买
                        </button>
                    </div>
                </form>

                <div class="alert alert-info" role="alert">
                    <i class="fas fa-shield-alt me-2"></i>
                    本平台承诺:
                    <ul class="mb-0">
                        <li>商品均经过严格质量把关</li>
                        <li>支持7天无理由退换</li>
                        <li>假一赔十</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 商品详情 -->
        <div class="row mt-4">
            <div class="col">
                <ul class="nav nav-tabs" id="productTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="description-tab" data-bs-toggle="tab" 
                           href="#description" role="tab">商品详情</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="specs-tab" data-bs-toggle="tab" 
                           href="#specs" role="tab">规格参数</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="reviews-tab" data-bs-toggle="tab" 
                           href="#reviews" role="tab">用户评价</a>
                    </li>
                </ul>
                <div class="tab-content mt-3" id="productTabContent">
                    <div class="tab-pane fade show active" id="description" role="tabpanel">
                        <p class="product-description" th:text="${product.description}">商品详细描述</p>
                        <div class="row" th:if="${not #lists.isEmpty(product.detailImages)}">
                            <div class="col-12 mb-3" th:each="image : ${product.detailImages}">
                                <img th:src="${image}" class="img-fluid" alt="商品详情图">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="specs" role="tabpanel">
                        <table class="table">
                            <tbody>
                                <tr th:each="spec : ${product.specifications}">
                                    <th th:text="${spec.name}">规格名</th>
                                    <td th:text="${spec.value}">规格值</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="reviews" role="tabpanel">
                        <div class="mb-4" th:if="${not #lists.isEmpty(reviews)}">
                            <div class="card mb-3" th:each="review : ${reviews}">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between mb-2">
                                        <div>
                                            <i class="fas fa-user-circle me-2"></i>
                                            <span th:text="${review.userName}">用户名</span>
                                        </div>
                                        <div>
                                            <i class="fas fa-star text-warning" 
                                               th:each="i : ${#numbers.sequence(1, review.rating)}"></i>
                                        </div>
                                    </div>
                                    <p class="card-text" th:text="${review.content}">评价内容</p>
                                    <small class="text-muted" 
                                           th:text="${#temporals.format(review.createTime, 'yyyy-MM-dd HH:mm')}">
                                        评价时间
                                    </small>
                                </div>
                            </div>
                        </div>
                        <div class="text-center" th:if="${#lists.isEmpty(reviews)}">
                            暂无评价
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:inline="javascript">
        function switchMainImage(src) {
            document.querySelector('.product-image-main').src = src;
            document.querySelectorAll('.product-image-thumb').forEach(thumb => {
                thumb.classList.remove('active');
                if(thumb.src === src) {
                    thumb.classList.add('active');
                }
            });
        }

        function updateQuantity(delta) {
            const input = document.getElementById('quantity');
            const newValue = Math.max(1, Math.min(parseInt(input.value) + delta, parseInt(input.max)));
            input.value = newValue;
        }

        function buyNow() {
            const form = document.querySelector('form');
            form.action = /*[[@{/orders/create}]]*/ '';
            form.submit();
        }
    </script>
</body>
</html> 